/*83856*/
<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="4">
          <el-input v-model="input" placeholder="Please input"/>
        </el-col>
        <el-col :span="4">
          <el-select v-model="value" class="m-2" placeholder="Select">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <!--        设为中文-->
          <el-config-provider :locale="locale">
            <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                :locale="locale"
            />
          </el-config-provider>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="Date" width="180"/>
      <el-table-column prop="name" label="Name" width="180"/>
      <el-table-column prop="address" label="Address"/>
    </el-table>
    <el-pagination layout="prev, pager, next"
                   :current-page="currentPage"
                   :page-size="2"
                   @current-change="getTableData"
                   :total="10"/>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";

const input = ref('')
const value = ref('')
const currentPage = ref(1)
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
]
const value1 = ref([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
])
const locale = ref(zhCn)

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const getTableData = (p) => {
  console.log('p', p)
  currentPage.value = p
}

</script>

<style scoped lang="scss">
:deep(.el-range-editor.el-input__inner) {
  height: 32px;
}
</style>